<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .container{
            width: 1100px;
            height: 370px;
        }
        .item{
            float: left;
            width: 216px;
            height: 170px;
            margin: 0 10px 5px;
        }
        .first{
            float: left;
            width: 600px;
            height: 350px;

        }
        .img-box{
            position: relative;
            height: 121px;
        }
        .img-box img{
            width: 216px;
            height: 121px;   
        }
        .title-box{
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
            overflow: hidden;
        }
        .big-box{
            position: relative;
        }
        .icon-video2x {
            position:absolute;
            display: block;
            width: 40px;
            height: 40px;
            background: url(./images/bofang2x.png);
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            bottom: 10px;
            left: 10px;
        }
        .icon-videox {
            position:absolute;
            display: block;
            width: 20px;
            height: 20px;
            background: url(./images/bofang2x.png);
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            bottom: 10px;
            left: 10px;

        }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="container">
            <template v-for="(item,index) in list">
                <div v-if="index==0" class="first">
                    <div class="big-box">
                        <img :src="item.imgPath" alt="">
                        <div class="icon-video2x"></div>
                    </div>
                    <div>{{item.title}}</div>
                </div>
                <div v-else class="item">
                    <div class="img-box">
                        <img :src="item.imgPath" alt="">
                        <div class="icon-videox"></div>
                    </div>
                    <div class="title-box">{{item.title}}</div>
                </div>
            </template>
        </div>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            list: [
              {
                imgPath:
                  "http://s2.jiguo.com/e91773c1213f645060a6d7efb7bacd50189b193b/640?imageView2/1/w/600/h/340/q/100",
                title: "深度体验 卡萨帝中子F2的洗烘护科技",
              },
              {
                imgPath:
                  "http://s2.jiguo.com/7c24b8cc-6e48-45f2-b84f-ed83b1bda728/640?imageView2/1/w/520/h/320/q/100",
                title: "大文件传输竞速PK战，华为MateBook究竟有多快",
              },
              {
                imgPath:
                  "http://s2.jiguo.com/3edbcedf-23bb-4c79-8dc9-ef7abe95c114/640?imageView2/1/w/520/h/320/q/100",
                title: "反复被cue的算力到底是啥？挑战全网最好「听」算力大片！",
              },
              {
                imgPath:
                  "http://s2.jiguo.com/2ab6714202d14ac199ae2ed6c3945beb25cd235a/640?imageView2/1/w/520/h/320/q/100",
                title:
                  "比快更快？PK狂飙超跑、秒速拧魔方，顶配轻薄本疾速「运行」挑战",
              },
              {
                imgPath:
                  "http://s2.jiguo.com/80c71173d2c8a8b7d0bb78ce5c35b05ff9147bbe/640?imageView2/1/w/520/h/320/q/100",
                title:
                  "百里挑一屏幕PK战｜2023年了，有手机能摆脱OLED频闪魔咒了吗？",
              },
            ],
          };
        },
      });
    </script>
  </body>
</html>
